import { Component, Input, OnInit } from '@angular/core';
import { LinesData } from '../chart-option';

@Component({
  selector: 'app-basic-line-chart',
  templateUrl: './basic-line-chart.component.html',
  styleUrls: ['./basic-line-chart.component.scss']
})
export class BasicLineChartComponent {
  @Input() LinesChartData: LinesData;

  constructor() {}
  get options() {
    const xAxis = this.LinesChartData.xAxisLabel;
    const dataset = this.LinesChartData.data;
    const names: string[] = [];
    const series = [];
    dataset.forEach((data) => {
      names.push(data.name);
      series.push({
        name: data.name,
        type: 'line',
        // smooth: true,
        areaStyle: { normal: {} },
        data: data.values
      });
    });

    return {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985'
          }
        }
      },
      legend: {
        data: names
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          data: xAxis
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series
    };
  }
}
